{% extends 'base.html' %}
{% load static %}

{% block title %}首页 - 商城系统{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/new_category_nav.css' %}">
<style>
    .hero-section {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 2rem;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
        font-weight: 700;
    }
    
    .category-card {
        text-align: center;
        padding: 1.5rem;
        border-radius: 10px;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .category-card:hover {
        transform: translateY(-5px);
    }
    
    .category-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .section-title {
        position: relative;
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background-color: #007bff;
    }
    
    .product-img {
        height: 200px;
        object-fit: contain;
    }
</style>
{% endblock %}

{% block content %}
<!-- 分类和轮播图区域 -->
<div class="container mt-3">
    <div class="row">
        <!-- 左侧分类导航 -->
        <div class="col-md-3 d-none d-md-block">
            {% include 'includes/category_sidebar_new.html' %}
        </div>
        
        <!-- 右侧轮播图 -->
        <div class="col-md-9">
            <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    {% for item in carousel_items %}
                    <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></button>
                    {% endfor %}
                </div>
                <div class="carousel-inner">
                    {% for item in carousel_items %}
                    <div class="carousel-item {% if forloop.first %}active{% endif %}" data-category-id="{{ item.category_id }}">
                        <img src="{{ item.image }}?v={% now 'U' %}" class="d-block w-100" alt="{{ item.title }}">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>{{ item.title }}</h2>
                            <p>{{ item.subtitle }}</p>
                            {% if item.category_id %}
                            <a href="/products/category/{{ item.category_id }}/" class="btn btn-primary view-category-btn">立即查看</a>
                            {% else %}
                            <a href="{% url 'product_list' %}" class="btn btn-primary view-category-btn">立即查看</a>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一个</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一个</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 分类导航 - 移动端显示 -->
<section class="py-4 bg-light d-md-none">
    <div class="container">
        <h2 class="section-title">热门分类</h2>
        <div class="row g-4">
            {% for category in categories|slice:":8" %}
            <div class="col-6">
                <div class="category-card bg-white shadow-sm">
                    <div class="category-icon text-primary">
                        <i class="bi bi-grid"></i>
                    </div>
                    <h5>{{ category.name }}</h5>
                    <p class="text-muted">
                        {% for subcategory in category.subcategories.all|slice:":3" %}
                        {{ subcategory.name }}{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                        {% if category.subcategories.count > 3 %}等{% endif %}
                    </p>
                    <a href="{% url 'category' category.id %}" class="btn btn-outline-primary btn-sm">查看更多</a>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-info">暂无分类数据</div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 热门商品 -->
<section class="py-5">
    <div class="container">
        <h2 class="section-title">热门商品</h2>
        <div class="row">
            {% for product in hot_products %}
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <img src="" data-src="{{ product.get_main_image_url }}" class="card-img-top product-img lazy-load" alt="{{ product.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <div class="mb-2">
                            <span class="price">¥{{ product.price }}</span>
                            {% if product.original_price %}
                            <span class="original-price">¥{{ product.original_price }}</span>
                            {% endif %}
                        </div>
                        <p class="card-text">{{ product.description|default:product.name|truncatechars:50|safe }}</p>
                    </div>
                    <div class="card-footer bg-white border-top-0">
                        <div class="d-grid">
                            <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-info">暂无商品数据</div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-4">
            <a href="{% url 'product_list' %}" class="btn btn-outline-primary">查看更多商品</a>
        </div>
    </div>
</section>

<!-- 按分类推荐商品 -->
{% for category_item in category_products %}
<section class="py-5 {% cycle 'bg-light' '' %}">
    <div class="container">
        <h2 class="section-title">{{ category_item.category.name }}</h2>
        <div class="row">
            {% for product in category_item.products %}
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <img src="" data-src="{{ product.get_main_image_url }}" class="card-img-top product-img lazy-load" alt="{{ product.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <div class="mb-2">
                            <span class="price">¥{{ product.price }}</span>
                            {% if product.original_price %}
                            <span class="original-price">¥{{ product.original_price }}</span>
                            {% endif %}
                        </div>
                        <p class="card-text">{{ product.description|default:product.name|truncatechars:50|safe }}</p>
                    </div>
                    <div class="card-footer bg-white border-top-0">
                        <div class="d-grid">
                            <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-4">
            <a href="{% url 'category' category_item.category.id %}" class="btn btn-outline-primary">查看更多{{ category_item.category.name }}</a>
        </div>
    </div>
</section>
{% endfor %}

<!-- 用户评价 -->
<section class="py-5 {% if category_products|length|divisibleby:2 %}bg-light{% endif %}" class="deferred-load">
    <div class="container">
        <h2 class="section-title">用户评价</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                <img src="" data-src="https://randomuser.me/api/portraits/women/32.jpg" alt="用户头像" class="rounded-circle lazy-load" width="50" height="50">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-0">李小姐</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">"购物体验非常好，商品质量很高，物流速度也很快。客服态度也很好，遇到问题都能及时解决。"</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                <img src="" data-src="https://randomuser.me/api/portraits/men/41.jpg" alt="用户头像" class="rounded-circle lazy-load" width="50" height="50">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-0">张先生</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star"></i>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">"商品种类很丰富，价格也很实惠。网站操作简单方便，支付流程也很顺畅。唯一的小问题是包装可以再加强一点。"</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                <img src="" data-src="https://randomuser.me/api/portraits/women/68.jpg" alt="用户头像" class="rounded-circle lazy-load" width="50" height="50">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-0">王女士</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-half"></i>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">"已经是第三次在这里购物了，每次都很满意。商品质量好，价格合理，而且售后服务也很到位。强烈推荐！"</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 返回顶部按钮 -->
<button id="back-to-top" class="btn btn-primary position-fixed bottom-0 end-0 m-4" style="display: none;">
    <i class="bi bi-arrow-up"></i>
</button>
{% endblock %}

{% block extra_js %}
<script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 延迟初始化轮播图，优先加载关键内容
        setTimeout(function() {
            // 轮播图初始化
            var myCarousel = document.querySelector('#mainCarousel');
            if (myCarousel) {
                var carousel = new bootstrap.Carousel(myCarousel, {
                    interval: 5000
                });
                
                // 处理轮播图的"立即查看"按钮点击
                let activeViewButton = function() {
                    // 获取当前活动的轮播项
                    let activeItem = document.querySelector('.carousel-item.active');
                    if (!activeItem) return;
                    
                    // 获取关联的分类ID
                    let categoryId = activeItem.getAttribute('data-category-id');
                    
                    // 获取当前轮播项中的按钮
                    let button = activeItem.querySelector('.view-category-btn');
                    if (!button) return;
                    
                    if (categoryId) {
                        button.href = `/products/category/${categoryId}/`;
                    } else {
                        button.href = `/products/`;
                    }
                };
                
                // 初始设置
                activeViewButton();
                
                // 轮播切换后更新按钮
                myCarousel.addEventListener('slid.bs.carousel', function() {
                    activeViewButton();
                });
            }
        }, 200);
    });
    
    // 返回顶部按钮 - 使用防抖优化滚动事件处理
    const scrollHandler = debounce(function() {
        var backToTopBtn = document.getElementById('back-to-top');
        if (backToTopBtn) {
            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        }
    }, 100);
    
    // 添加滚动监听器
    window.addEventListener('scroll', scrollHandler);
    
    // 返回顶部点击事件
    document.getElementById('back-to-top')?.addEventListener('click', function() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
    
    // 为首页特别优化，预加载首屏图片
    function preloadFirstScreenImages() {
        // 获取视口高度，预加载首屏内容
        const viewportHeight = window.innerHeight;
        
        // 优先加载轮播图第一张图片
        const activeCarouselImage = document.querySelector('.carousel-item.active img.lazy-load');
        if (activeCarouselImage && activeCarouselImage.dataset.src) {
            const img = new Image();
            img.onload = function() {
                activeCarouselImage.src = activeCarouselImage.dataset.src;
                activeCarouselImage.classList.add('loaded');
            };
            img.src = activeCarouselImage.dataset.src;
        }
    }
    
    // 页面加载完成后立即预加载首屏内容
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        preloadFirstScreenImages();
    } else {
        document.addEventListener('DOMContentLoaded', preloadFirstScreenImages);
    }
</script>
{% endblock %}